// 整个页面设置背景图
html {
    height: 3000px;
    background: url('../img/bg.jpg') no-repeat;
    // 将背景图片铺满整个容器
    background-size: cover;
}

// 定义一个公共的边框图片样式
.pub() {
    width: 100%;
    border: 1px solid transparent;
    //设置边框图片
    border-image-source: url('../img/border.png');
    // 分割边框
    border-image-slice: 50 38 58 127;
    // 设置边框的平铺方式
    border-image-repeat: round;
    // 设置边框宽度
    border-image-width: 2.083rem 1.583rem 2.417rem 5.292rem;
    box-sizing: border-box;
}

// 主体大盒子
.main_body {
    display: flex;
    padding: 3.583rem  0.833rem  0  0.833rem;
    background: url('../img/logo.png') no-repeat;
    background-size: contain;
    // 左侧盒子
    .leftBox {
        flex: 3;
        // 顶部第一个盒子
        .top1_box {
            height: 4.583rem;
            // 调用公共样式
            .pub();
            display: flex;
            justify-content: space-around;
            align-items: center;
            h4 {
                font-size: 0.917rem;
            }

            p {
                color: #006cff;
            }
        }

        // 顶部第二个盒子
        .top2_box {
            height: 19.667rem;
            .pub();
            margin: 0.833rem  0;
            // 标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                display: flex;
                padding-left: 1.333rem;
                // 竖线
                .line {
                    width: 0.083rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.917rem 1.083rem;
                }
                .active {
                    color: #006cff;
                }
            }
            // 提示标题
            .tip_title {
                height: 1.583rem;
                line-height: 1.583rem;
                background: rgba(255,255,255,.1);
                padding-left: 1.333rem;
                span {
                    color: #68d8fe;
                    font-size: 0.583rem;
                }
                span:nth-child(2) {
                    margin: 0 7.5rem 0 3.542rem;
                }
            }
            // 内容区域
            .content {
                padding-left: 1.333rem;
                li {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    span {
                        font-size: 0.583rem;
                        color: #006cff;
                        display: inline-block;
                    }
                    span:nth-child(1) {
                        width: 5.833rem;
                    }
                    span:nth-child(2) {
                         width: 11rem;
                    }
                }
            }
        }

        // 第三个盒子
        .top3_box {
            height: 13.917rem;
            .pub();

            // 标题
            .title {
                height: 2.917rem;
                line-height: 2.917rem;
                font-size: 0.833rem;
                padding-left: 1.333rem;
            }

            // 内容盒子
            .content {
                padding: 0 1.333rem;
                display: flex;
                // 饼状图
                .pie_box {
                    flex: 1;
                    height: 9.917rem;
                }
                // 信息展示盒子
                .msgshow {
                    height: 9.917rem;
                    width: 6.917rem;
                    background: url('../img/rect.png') no-repeat;
                    background-size: cover;
                    .item {
                        margin-left: 1.333rem;
                        margin-top: 1.583rem;
                        h4 {
                            font-size: 0.917rem;
                        }

                        p {
                            color: #006cff;
                            font-size: 0.75rem;
                        }
                    }
                }
            }

        }
    }

    // 中间盒子
    .mainbox {
        flex: 4;
        margin: 1.917rem 0.833rem 0 0.833rem;

        // 标题
        .middle_title {
            font-size: 0.917rem;
            span {
                font-size: 0.917rem;
            }
        }

        // 中国地图
        .map {
            height: 21.667rem;
            background-color: rgba(255,255,255,.1);
            margin-top: 0.417rem;
        }

        // 柱状图
        .lineBox {
            height: 13.917rem;
            .pub();
            margin-top: 0.833rem;

            // 标题
            .title {
                height: 2.917rem;
                line-height: 2.917rem;
                padding-left: 1.333rem;
                h4 {
                    font-size: 0.833rem;
                }
            }

            // 内容
            .content {
                padding: 0 1.333rem;
                display: flex;
                // 左侧柱状图盒子
                .left_lineBox{
                    flex: 1;
                    height: 9.917rem;
                }
                // 信息展示盒子
                .msgshow {
                    height: 9.917rem;
                    width: 6.917rem;
                    background: url('../img/rect.png') no-repeat;
                    background-size: cover;

                    .item {
                        margin-left: 1.333rem;
                        margin-top: 1.583rem;

                        h4 {
                            font-size: 0.917rem;
                        }

                        p {
                            color: #006cff;
                            font-size: 0.75rem;
                        }
                    }
                }
            }
        }

    }


    // 右侧盒子
    .rightBox{
        flex: 3;
        // 顶部第一个标题
        .top1_box {
            height: 6rem;
            margin-bottom: 0.833rem;
            .pub();

            // 标题
            .title {
                height: 2.667rem;
                line-height: 2.667rem;
                padding-left: 1.333rem;
                display: flex;
                a {
                    font-size: 0.833rem;
                    color: #1950c4;
                }
                .line {
                    width: 0.083rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.917rem  0.75rem;
                }

                .active {
                    color: #fff;
                }
            }
            // 内容区域
            .content {
                .item {
                    display: flex;
                    padding-left: 1.333rem;

                    h4 {
                        font-size: 0.833rem;
                    }

                    p {
                        color: #006cff;
                    }

                    .leftItem {
                        margin-right: 7.083rem;
                    }
                }
            }
        }
        // 折线图盒子
        .line_box {
            height: 10.083rem;
            margin-bottom: 0.833rem;
            .pub();
            // 标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                padding-left: 1.333rem;
                display: flex;
                h4 {
                    font-size: 0.833rem;
                }
                a {
                    width: 1.083rem;
                    height: 1.083rem;
                    line-height: 1.083rem;
                    text-align: center;
                    font-size: 0.833rem;
                    margin-right: 1.167rem;
                    margin-top: 0.833rem;
                }
                .active {
                    background-color: #4c9bfd;
                    color: #fff;
                    border-radius: 0.125rem;
                }
                .line {
                    width: 0.083rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.917rem 0.75rem;
                }
            }

            // 折线统计图内容盒子
            .conent {
                padding: 0 1.333rem;
                // 折线图
                .lineBox {
                    height: 7.083rem;
                }
            }
        }
        //第三个盒子
        .top3_box {

            display: flex;

            //设置左右两个盒子的公共样式
            .public {
                flex: 1;
                height: 9.583rem;
                .pub();

                .title {
                    height: 2.833rem;
                    line-height: 2.833rem;
                    padding-left: 1.333rem;
                    font-size: 0.833rem;
                }
            }

            // 左侧盒子
            .leftBox3 {
                margin-right: 0.833rem;
            }
            
            // 内容区域盒子
            .content {
                padding: 0 1.333rem;

                .item {
                    display: flex;
                    margin-bottom: 1.083rem;

                    h4 {
                        font-size: 1.083rem;
                    }

                    .items1 {
                        margin-right: 3.083rem;
                    }
                }
            }


            // 右侧盒子
            .rightBox3 {
                position: relative;
                // 销售进度
                .progress {
                    height: 3.417rem;
                }

                // 数字显示
                h3 {
                    position: absolute;
                    left: 50%;
                    top: 45%;
                    transform: translateX(-50%);
                    font-size: 1rem;
                }

                // 最后一个信息展示盒子
                .lastMsg {
                    padding: 0 1.333rem;
                    .item {
                        display: flex;
                        margin-bottom: 1.083rem;

                        h4 {
                            font-size: 1.083rem;
                        }

                        .items1 {
                            margin-right: 3.083rem;
                        }
                    }
                }
            }
        }

    }
}
